<template>
  <div id="dongtai">
    <h2>04-动态组件</h2>
    <!-- <ul>
      <li>
        <a href="#" @click="isLogin = true">登录</a>
      </li>
      <li>
        <a href="#" @click="isLogin = false">注册</a>
      </li>
    </ul>
    <login v-if="isLogin" />
    <register v-else /> -->
    <ul>
      <li>
        <a href="#" @click="mycom = 'login'">登录</a>
      </li>
      <li>
        <a href="#" @click="mycom = 'register'">注册</a>
      </li>
    </ul>
    <!-- 动态组件：将来只要给 component 设置 is 属性，那么这个 component 就会自动生成为对应的组件 -->
    <component :is="mycom" />
  </div>
</template>

<script>
// 以同步组件的方式来导入的
// import login from './login.vue'
// import register from './register'
// 以异步组件的方式导入
const login = () => import('./login.vue')
const register = () => import('./register.vue')
export default {
  data () {
    return {
      isLogin: true,
      mycom: 'register'
    }
  },
  components: {
    login,
    register
  }
}
</script>

<style lang="less"></style>
